<template>
  <el-dialog v-model="isModalVisible" width="800" :append-to-body="true" @close="closeModal">
    <div class="info">
      <div>
        <div class="right-color">基本信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="业主姓名：" prop="name">{{ infos?.ownName }}</el-form-item>
          <el-form-item label="联系电话：" prop="zone">{{ infos?.mobile }}</el-form-item>
          <el-form-item label="房屋户型：" prop="name">{{ infos?.houseType }}</el-form-item>
          <el-form-item label="房屋面积：" prop="zone">{{ infos?.size }}㎡</el-form-item>
          <el-form-item label="房屋地址：" prop="zone">
            {{ infos?.region }}{{ infos?.neighborhood }}
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div>
        <div class="right-color">需求信息</div>
        <el-form label-width="auto" inline>
          <el-form-item label="品类商品：" prop="name">{{ infos?.productTypeName }}</el-form-item>
          <el-form-item label="空间：" prop="zone">{{ infos?.spaceName }}</el-form-item>
          <el-form-item label="采买时间：" prop="time">{{ infos?.purchaseTypeName }}</el-form-item>
          <el-form-item label="预算：" prop="time">{{ infos?.budget + "元" }}</el-form-item>
          <el-form-item label="发布时间：" prop="time">{{ infos?.publishTime }}</el-form-item>
          <el-form-item label="业主备注：" prop="time">{{ infos?.remark }}</el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData"]);

const isModalVisible = ref();
const infos = ref();
function showModal(val: any) {
  isModalVisible.value = true;
  infos.value = val;
}

function closeModal() {
  isModalVisible.value = false;
}

defineExpose({
  showModal,
});
</script>
<style lang="scss" scoped>
.info {
  .right-color {
    border-left: 4px solid #4095fe;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>
